<template>
    <view style="background-color: #f4f5f7;
height: 100vh;" >
         <u-navbar :is-back="true"  :custom-back='BackM' title="订单详情" back-text='' >
         <view class="slot-right" style="width: 100%;display: flex;justify-content: flex-end;" >
				<view v-if="orderDic.status=='ing'||orderDic.status=='timeout'" @click="closeOrder()" style="margin-right: 0.5rem;font-size: 0.78rem;
				font-family: PingFang SC;font-weight: 300;color: #02B074;" >结束订单</view>
		 </view>
         </u-navbar>

         <view style="display: flex;
justify-content: space-between;
padding: 0.5rem">


            <view style="
font-size: 0.79rem;
font-family: PingFang SC;
font-weight: 400;
color: #000000;" > 订单号：{{orderDic.no}} </view>


<!-- <view style="
font-size: 0.79rem;
font-family: PingFang SC;
font-weight: 400;
color: #000000;" > 订单号：563563563543 </view> -->


            <view style="
font-size: 0.79rem;
font-family: PingFang SC;
font-weight: 400;
color: #000000;" > {{orderStatusString(orderDic.status)}} </view>
         </view>
		 
		 
		<!-- <view style="
		 font-size: 0.79rem;
		 font-family: PingFang SC;
		 font-weight: 400;
		 color: #000000;" > 租赁中</view>
		          </view> -->


         <view class="" style="border-bottom: 1px solid #e8e8e8;"   v-for="(item,index) in showDatasList1 " :key="index">
                           <view class="prolifyP" >
                            <view style="">
                             <view style="
font-size: 0.78rem;
font-family: PingFang SC;
font-weight: 400;
color: #000000;" >{{item.name}}</view>
                            </view>
                          <view class="cargoBtn" >{{item.value}}</view>
                           </view>
         </view>

       <!--  <view style="
font-size: 0.72rem;
font-family: PingFang SC;
font-weight: 400;
color: #000000;
text-align: center;
padding: 0.3rem;
">
            -付款信息-
         </view> -->


       <!--  <view class="" style="border-bottom: 1px solid #e8e8e8;"   v-for="(item,index) in showDatasList2 " :key="index">
                           <view class="prolifyP" >
                            <view style="">
                             <view style="
font-size: 0.78rem;
font-family: PingFang SC;
font-weight: 400;
color: #000000;" >{{item.name}}</view>
                            </view>
                          <view class="cargoBtn" >{{item.value}}</view>
                           </view>
         </view> -->

             <!-- <view style="
font-size: 0.72rem;
font-family: PingFang SC;
font-weight: 400;
color: #000000;
text-align: center;
padding: 0.3rem;
background-color: #f4f5f7;
">
            -分润详情-
         </view> -->


         <!-- <view class="" style="border-bottom: 1px solid #e8e8e8;"   v-for="(item,index) in showDatasList " :key="index">
                           <view class="prolifyP" >
                            <view style="">
                             <view style="
font-size: 0.78rem;
font-family: PingFang SC;
font-weight: 400;
color: #000000;" >{{item.name}}</view>
                            </view>
                          <view class="cargoBtn" >{{item.value}}</view>
                           </view>
         </view> -->









    </view>

</template>

<script lang='ts' >
import { Component, Prop, Vue, Watch, Emit } from "vue-property-decorator";

import { orderDetails } from "../../utils/uniApi";
import { endOrder } from "../../utils/uniApi";

@Component({
  //   @Component  是一个装修器   不可以在下面写语句
  name: "test",
})
export default class extends Vue {
  @Prop({
    type: String, // 父组件传递给子组件的数据类型
    required: false, // 是否必填
    default: " ", // 默认值， 如果传入的是 Object，则要 default: ()=>({}) 参数为函数
  })
  msg!: string;
  
  public orderDetailDic:any = {};
  public orderDic:any = {no:'',status:''};
  public showDatasList1:Array<any> = [];
  public showDatasList2:Array<any> = [];
  
  public orderId:any;

  public showDatasList = [
    {
      name: "我的收益",
      value: "0.00元",
    },
    {
      name: "（员工）",
      value: "暂无信息",
    },
    {
      name: "拉卡拉总代理（商户）",
      value: "0.00元",
    },
  ];
  onHide(){
  	  uni.hideLoading();
  }
  onLoad(options:any) {
	  this.orderId = options.orderId;
  }

  created() {}

  mounted() {
    //  console.log('父组件传递的参数:',this.$parent)   //暂时不考虑
	this.orderDetails(this.orderId);
  }
  
  
  //下拉刷新
  onPullDownRefresh() {
      setTimeout(function () {
        uni.redirectTo({
          url: "../../pages/order/orderDetaileding",
        });
        uni.stopPullDownRefresh();
      }, 1000);
  }
  
  //订单状态转换
  orderStatusString(status: string){
  	  if(status == "timeout"){
  		  return '超时'
  	  } else if (status == "end"){
  		  return '完结'
  	  }else if (status == "ing"){
  		  return '租赁中'
  	  }else{
		  return ''
	  }
  }
   //结束订单
  closeOrder(){
	  uni.showLoading({
	  	title: '加载中'
	  });
	  let params = {
	    userId:uni.getStorageSync("userId") == ""? "": parseInt(uni.getStorageSync("userId")),
	  	orderId:this.orderId == ""? "": parseInt(this.orderId),
	  };
	  
	  endOrder(params).then((res: any) => {
	      if(res.data.code==200){
			  uni.hideLoading();
			  uni.showToast({
			  	title: '取消订单成功',
			  	icon:'none',
			  	duration: 2000
			  });
			  this.orderDetails(this.orderId);//手动取消订单成功后刷新页面
			  // console.log('++++++++++++++++++++手动取消订单成功' ) 
	      }else{
			  uni.hideLoading();
			  uni.showToast({
			  	title: '取消订单失败',
			  	icon:'none',
			  	duration: 2000
			  });
	      }
	  
	  });
  }
  //订单详情
  orderDetails(orderId:any){
  	  uni.showLoading({
  	  	title: '加载中'
  	  });
  	  let params = {
  		orderId:orderId == ""? "": parseInt(orderId), //订单id
  		userId:uni.getStorageSync("userId") == ""? "": parseInt(uni.getStorageSync("userId")),
  	  };
  	  orderDetails(params).then((res: any) => {
  		  
  	    console.log('+++++++++++++++++订单详情' + JSON.stringify(res.data) )
  	      if(res.data.code==200){
			  this.orderDetailDic = res.data.data;
			  if(this.orderDetailDic && this.orderDetailDic.orderInfo){
				 this.orderDic.no = this.orderDetailDic.orderInfo.orderSn
				 this.orderDic.status = this.orderDetailDic.orderInfo.orderStatus
			  }
			  let addressD = ''
			  if(this.orderDetailDic && this.orderDetailDic.outShopBranchInfo){
				  addressD = this.orderDetailDic.outShopBranchInfo.provinceName+this.orderDetailDic.outShopBranchInfo.cityName+this.orderDetailDic.outShopBranchInfo.districtName+this.orderDetailDic.outShopBranchInfo.address
			  }
			  let addressB = ''
			  if(this.orderDetailDic && this.orderDetailDic.inShopBranchInfo){
				  addressB = this.orderDetailDic.inShopBranchInfo.provinceName+this.orderDetailDic.inShopBranchInfo.cityName+this.orderDetailDic.inShopBranchInfo.districtName+this.orderDetailDic.inShopBranchInfo.address
			  }
			  
			  let dic0: { [key: string]: any } = {name:'租借时间',value:this.orderDetailDic.orderInfo.rentDate};
			  let dic1: { [key: string]: any } = {name:'租借商户',value:this.orderDetailDic.orderInfo.outShopName};
			  let dic2: { [key: string]: any } = {name:'租借地点',value:addressD};
			  let dic3: { [key: string]: any } = {name:'归还时间',value:this.orderDetailDic.orderInfo.backDate};
			  let dic4: { [key: string]: any } = {name:'归还地点',value:addressB};
			  let dic5: { [key: string]: any } = {name:'计费标准',value:this.orderDetailDic.chargingStandard};
			  let dic6: { [key: string]: any } = {name:'充电宝类型',value:this.orderDetailDic.orderInfo.modelsName};
			  let dic7: { [key: string]: any } = {name:'底座SN码',value:this.orderDetailDic.orderInfo.outSn};
			  let dic8: { [key: string]: any } = {name:'充电宝SN码',value:this.orderDetailDic.orderInfo.bankSn};
			  let dic9: { [key: string]: any } = {name:'所属员工',value:this.orderDetailDic.distributionUser.nickName};
			  let dic11: { [key: string]: any } = {name:'支付金额',value:this.orderDetailDic.orderInfo.totalAmount};
			  this.showDatasList1.push(dic0)
			  this.showDatasList1.push(dic1)
			  this.showDatasList1.push(dic2)
			  if(addressB!=''){
				  this.showDatasList1.push(dic3)
				  this.showDatasList1.push(dic4)
			  }
			  this.showDatasList1.push(dic5)
			  this.showDatasList1.push(dic6)
			  this.showDatasList1.push(dic7)
			  this.showDatasList1.push(dic8)
			  this.showDatasList1.push(dic9)
			  this.showDatasList1.push(dic11)
			  // let dic10: { [key: string]: any } = {name:'支付方式','信用租赁'};
			  // this.showDatasList2.push(dic10)
			  this.showDatasList2.push(dic11)
			  
			  uni.hideLoading();
  	      }else{
			  uni.hideLoading();
			  uni.showToast({
					title: '数据加载失败',
					icon: 'none',
					duration: 2000
			  });
  	      }
  	  });
  }

  addPosM() {
    uni.navigateTo({
      url: "./cargoPos",
    });
  }
  goBackM() {
    uni.navigateBack({
       delta: 1,
    });
  }
}
</script>

<style  lang="scss"  scoped>
.searchPP {
  background-color: white;
  padding: 0.5rem;

  display: flex;
  align-items: center;
  border-bottom: 1px solid #e8e8e8;
}
.searchP {
  background-color: white;
  display: flex;
  width: 100%;
  justify-content: space-between;
}
.prolifyP {
  display: flex;
  padding: 0.8rem 1rem;
  justify-content: space-between;
  align-items: center;
}

/* 加上标签 或者加上>   */
.agentprolify {
  display: flex;
  align-items: center;
  padding: 0.8rem 1rem;
}

.agentprolify :first-child {
  font-size: 0.72rem;
  font-family: "PingFang SC";
  font-weight: 300;
  color: #666666;
}

.agentprolify > :nth-child(1) {
}
.agentprolify > :nth-child(2) {
  color: red;
}
.cargoBtn {
  font-size: 0.78rem;
  font-family: PingFang SC;
  font-weight: 300;
  color: #000000;
}

.footP {
  position: absolute;
  bottom: 0;
  background-color: #02af74;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.prolifyP {
  display: flex;
  padding: 0.8rem 1rem;
  justify-content: space-between;
  align-items: center;
  background-color: white;
}
</style>